import { FC, useCallback, useEffect, useState } from "react"

import { queryLimitedRed } from "@/api/member"
import { IMemberParams } from "@/api/risk/types"
import { DataList } from "@/components/common"
import { StyleTable } from "@/components/common/styled"
import { useLocale } from "@/locales"

import { columnsLimitedRed } from "./TableInfo"
export interface dataLimitedRedRes {
	status: number
	templateId: string
	templateName: string
	venueTypeCode: string
}
export const LimitedRed: FC<{ data: IMemberParams }> = ({ data }) => {
	const [dataLimitedRed, setDataLimitedRed] = useState<dataLimitedRedRes[]>([])
	const { formatMessage } = useLocale()

	const handleGetLimitedRed = useCallback(async () => {
		const param = {
			memberId: data.userId,
			merchantId: data.merchantId
		}
		const [err, LimitedRedRes] = await queryLimitedRed({ ...param })
		if (!err) setDataLimitedRed(LimitedRedRes)
	}, [data])
	useEffect(() => {
		// this will help to refresh pagination when upper actions are changed
		if (data.userId) handleGetLimitedRed()
	}, [data])

	return (
		<StyleTable>
			<DataList
				data={dataLimitedRed || []}
				columns={columnsLimitedRed(formatMessage, data, dataLimitedRed, handleGetLimitedRed)}
				bordered
				size="middle"
				rowKey="id"
			/>
		</StyleTable>
	)
}
